<template>
  <view :class="['container', { dark: theme == 'dark' }]">
    <view :class="['wrap', { dark: theme == 'dark' }]">
      <view class="side">
        <view
          class="order"
          @click="funsItemClick(1)"
        >
          <u-icon
            size="60"
            name="order"
            color="blue"
          >
          </u-icon>
        </view>
      </view>
      <uni-section
        class="mb-10"
        title=""
      >
        <view class="userinfo-card">
          <view class="card-box">
            <view class="vcircle">
              <text>{{ $t('home.ieoname') }}</text>
              <view
                class="bd_input ptb10 plr10 tc flex1 radius4"
                @click="showC = true"
              >
                <text>{{ info.coinName }}</text>
                <u-icon class="uicon-arrow-down u-iconfont i-right" />
              </view>

              <view class="color-light fn-center fn-10">
                <view class="label m-b-xs color-default">{{ $t('ieo.issuePrice') }}</view>
                <view class="fn-11">1 {{ info.coinName }}≈</view>
                <view class="fn-11">
                  <text class="fn-16">
                    <span>{{ info.issuePrice }}</span> </text
                  >USDT</view
                >
                <view
                  v-if="false"
                  class="fn-center fn-15 color-success"
                  >{{ info.coinName }}</view
                >
              </view>
            </view>
          </view>
          <view class="card-box">
            <view>
              <view class="m-b-xs">
                <view class="label fn-10">{{ $t('ieo.subscribeCurrency') }}</view>
                <view class="color-light">{{ info.subscribeCurrency }}</view>
              </view>
              <view class="m-b-xs">
                <view class="label fn-10">{{ $t('ieo.expectedTimeOnline') }}</view>
                <view class="color-light">{{ info.expectedTimeOnline }}</view>
              </view>
              <view class="m-b-xs">
                <view class="label fn-10">{{ $t('ieo.startSubscriptionTime') }}</view>
                <view class="color-light">{{ info.startSubscriptionTime }}</view>
              </view>
              <view class="m-b-xs">
                <view class="label fn-10">{{ $t('ieo.endSubscriptionTime') }}</view>
                <view class="color-light">{{ info.endSubscriptionTime }}</view>
              </view>
              <view class="m-b-xs color-red">
                <view class="label fn-10">{{ $t('ieo.expectedTimeOnlineDown') }}</view>
                <view class="color-light">{{ countDown }}</view>
              </view>
            </view>
          </view>
        </view>
      </uni-section>

      <uni-section
        class="mb-10"
        title=""
      >
        <view class="flex between plr20">
          <text></text>
          <text>{{ $t('home.selectcoin') }}</text>
        </view>
        <view class="ptb10 bgPart plr20">
          <view
            class="bd_input ptb10 plr10 tc flex1 radius4"
            @click="showP = true"
          >
            <view class="flex between">
              <view>
                <text>{{ $t('ieo.subscribeCurrency') }}</text>
              </view>
              <view>
                <text>{{ symbol.name }}</text>
                <u-icon
                  class="uicon-arrow-down u-iconfont"
                  style="margin-left: 20upx"
                />
              </view>
            </view>
          </view>
          <view class="tips m-t-xs fn-sm d-flex justify-between color-sell">
            <view
              >1 {{ symbol.name }} ≈
              {{ symbol.val }}
              {{ info.coinName }}</view
            >
            <view class="color-sell"
              >{{ coinnum }} {{ symbol.name }} ≈ {{ symbol.val * coinnum }}
              {{ info.coinName }}</view
            >
          </view>
          <u-picker
            mode="selector"
            :default-selector="[0]"
            :confirm-text="confirmText"
            :cancel-text="cancelText"
            v-model="showP"
            :range="tokenlist"
            @confirm="getSymbol"
            range-key="name"
          >
          </u-picker>
          <u-picker
            mode="selector"
            :default-selector="[0]"
            :confirm-text="confirmText"
            :cancel-text="cancelText"
            v-model="showC"
            :range="listinfo"
            @confirm="changCoin"
            range-key="coinName"
          >
          </u-picker>
          <view class="mb20">
            <view class="">{{ $t('trade.num') }}</view>
            <view class="flex alcenter between bdb1f">
              <!-- 数量 -->
              <input
                type="digit"
                class="h40 flex1 input-uni"
                v-model="coinnum"
                :placeholder="$t('bico.W27')"
              />
              <view class="flex alcenter">
                <view
                  class="pl10"
                  @tap="all"
                  >{{ $t('trade.all') }}</view
                >
              </view>
            </view>
          </view>
        </view>
        <view class="flex1 radius4">
          <view class="flex centerview">
            <view class="vbox">
              <view>
                <text>{{ $t('home.shijia') }}</text>
              </view>
              <view>
                <text :class="[parseFloat(coinData.rose) < 0 ? 'red' : 'green']"
                  >${{ coinData.close }}</text
                >
              </view>
            </view>
            <view class="vbox">
              <view>
                <text>{{ $t('home.ztf') }}</text>
              </view>
              <view>
                <text :class="[parseFloat(coinData.rose) < 0 ? 'red' : 'green']"
                  >{{ (coinData.rose - 0) | toFixed2 }}%</text
                >
              </view>
            </view>
          </view>
        </view>
        <view
          class="mt40 bgBlue radius4 ptb10 white ft14 tc mb10"
          @tap="submit"
          >{{ $t('ieo.subscribebtn') }}</view
        >
      </uni-section>
      <uni-section
        class="mb-10"
        :title="$t('ieo.subscribeWeek')"
      >
        <uni-steps
          activeColor="#60c08c"
          direction="column"
          :options="[
            { title: this.$t('ieo.subscribePre'), desc: this.$t('ieo.subscribeActivit') },
            { title: this.$t('ieo.startSubscription'), desc: this.info.startSubscriptionTime },
            { title: this.$t('ieo.endSubscription'), desc: this.info.endSubscriptionTime },
            { title: this.$t('ieo.subscribeResult'), desc: this.info.announceTime }
          ]"
          :active="active"
        ></uni-steps>
      </uni-section>
      <uni-section
        class="mb-10"
        :title="$t('ieo.subscribeDetail')"
      >
        <u-parse :html="info.projectDetails"> </u-parse>
      </uni-section>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import {
  huobiTicket,
  subscribeTokenListApi,
  subscribeApi,
  subscribeRecordsApi,
  submitSubscribeApi
} from '../../common/apiString.js';
import { myMixins } from '@/common/myMixins.js'; //加入全局下拉刷新
export default {
  mixins: [myMixins],
  data() {
    return {
      coinselect: {
        val: 0
      },
      coinnum: '',
      listinfo: [],
      countDown: '',
      info: {
        coinName: '',
        startSubscriptionTime: '',
        endSubscriptionTime: '',
        announceTime: ''
      },
      currentPage: 1,
      pageSize: 5,
      total: 0,
      active: 0,
      tokenlist: [],
      recordsist: [],
      showP: false,
      showC: false,
      confirmText: this.$t('login.c1'),
      cancelText: this.$t('login.c2'),
      coinArr: [],
      symbol: [],
      coinData: {
        close: 0,
        rose: 0
      },
      getList: null
    };
  },
  computed: {
    ...mapState({
      theme: state => state.theme
    })
  },
  filters: {
    toFixed2: function (value, options) {
      value = Number(value);
      return value.toFixed(2);
    }
  },
  watch: {
    coinnum: function (newVal, oldVal) {
      return Number(newVal);
    },
    info: function (newVal, oldVal) {
      let time = new Date().getTime();
      let index = 0;
      if (time > Date.parse(this.info.announceTime.replace(/-/g, '/'))) {
        index = 3;
      } else if (time > Date.parse(this.info.endSubscriptionTime.replace(/-/g, '/'))) {
        index = 2;
      } else if (time > Date.parse(this.info.startSubscriptionTime.replace(/-/g, '/'))) {
        index = 1;
      }
      this.active = index;
    }
  },
  onLoad() {
    uni.setNavigationBarTitle({
      //title: this.$t('bico.W384'),
      title: 'ICO'
    });
    this.$utils.setTheme(this.theme);
    this.init();
  },
  onShow() {
    var that = this;
    that.getList = setInterval(function () {
      that.getCumPrice();
    }, 2000);
  },
  beforeDestroy() {
    clearInterval(this.getList);
  },
  onHide() {
    //this.$socket.closeSocket(socketInstance);
    clearInterval(this.getList);
  },
  methods: {
    countTime() {
      //获取当前时间
      var data = this.info;
      if (data.coinName) {
        var date = new Date();
        var now = date.getTime();
        //设置截止时间
        //var str="2019/1/1 00:00:00";
        var endDate = new Date(data.expectedTimeOnline.replace(/-/g, '/'));
        var end = endDate.getTime();

        //时间差
        var leftTime = end - now;
        //定义变量 d,h,m,s保存倒计时的时间
        var d, h, m, s;
        if (leftTime >= 0) {
          d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
          h = Math.floor((leftTime / 1000 / 60 / 60) % 24);
          m = Math.floor((leftTime / 1000 / 60) % 60);
          s = Math.floor((leftTime / 1000) % 60);
          if (this.$t('login.c1') == '确 认') {
            this.countDown = d + ' 天 ' + h + ' 时 ' + m + ' 分 ' + s + ' 秒';
          } else {
            this.countDown = d + ' days ' + h + ' hours ' + m + ' minutes ' + s + ' seconds';
          }
        } else {
          this.countDown = this.$t('ieo.subscribeResult');
        }
      }
      setTimeout(this.countTime, 2000);
    },
    getCumPrice() {
      if (!this.info) return false;
      let symbol = this.info.coinName + '/USDT';
      this.$utils.initData(
        {
          url: huobiTicket,
          data: {
            type: 0
          },
          type: 'post'
        },
        (res, msg) => {
          for (var i = 0; i < res.length; i++) {
            if (res[i].symbol == symbol) {
              this.coinData = res[i];
            }
          }
        }
      );
    },
    selectCoin(id) {
      for (var i = 0; i < this.listinfo.length; i++) {
        if (this.listinfo[i].id == id) {
          this.info = this.listinfo[i];
          this.subscribeTokenList();
        }
      }
    },
    init() {
      this.getSubscribe();
      this.countTime();
    },
    submit() {
      var that = this;
      var num = parseFloat(this.coinnum);
      if (num < 0) {
        this.$utils.showLayer(this.$t('bico.W323') + 0);
        return;
      }
      if (num > this.symbol.usedprice.usedPrice) {
        this.$utils.showLayer(this.$t('bico.W324') + this.symbol.usedprice.usedPrice);
        return;
      }
      if (this.symbol.name.length <= 0) {
        this.$utils.showLayer(this.$t('bico.W324'));
        return;
      }
      uni.showLoading();
      that.$utils.initDataToken(
        {
          url: submitSubscribeApi,
          type: 'post',
          data: {
            sid: that.info.id,
            coin: that.symbol.name,
            amount: that.coinnum
          }
        },
        res => {
          uni.hideLoading();
          that.$utils.showLayer(this.$t('ieo.subscribeSuccess'));
          that.init();
        }
      );
    },

    getSymbol(e) {
      this.symbol = this.tokenlist[e[0]];
    },
    changCoin(e) {
      this.selectCoin(this.listinfo[e[0]].id);
    },
    all() {
      this.coinnum = this.symbol.usedprice.usedPrice;
    },
    funsItemClick(index) {
      uni.navigateTo({
        url: '/pages/ieo/Ieodetails' //广告详情
      });
    },
    subscribeTokenList() {
      var that = this;
      that.$utils.initDataToken(
        {
          url: subscribeTokenListApi,
          type: 'post',
          data: {
            sid: that.info.id
          }
        },
        res => {
          let arr = [];
          for (let item in res) {
            arr.push(res[item]);
          }
          that.symbol = arr[0];
          that.tokenlist = arr;
        }
      );
    },
    getSubscribe() {
      var that = this;
      that.$utils.initDataToken(
        {
          url: subscribeApi,
          type: 'post',
          data: {}
        },
        res => {
          that.listinfo = res;
          that.selectCoin(res[0].id);
        }
      );
    },

    change(index) {
      this.current = index;
      this.getListData();
    }
  }
};
</script>

<style lang="scss">
page {
  background: #f7f7f7;
}

.container {
  .side {
    position: absolute;
    top: 2vw;
    right: 0;
    left: 92vw;
    z-index: 99;
  }
  .userinfo-card {
    display: flex;
  }
  .color-success {
    color: #60c08c;
  }
  .color-red {
    color: #ff0000;
  }
  .fn-15 {
    font-size: 15px;
  }
  .fn-sm {
    font-size: 12px;
  }
  .d-flex {
    display: flex;
  }
  .justify-between {
    justify-content: space-between;
  }
  .color-sell {
    color: #ea3131;
  }
  .m-b-xs {
    margin-bottom: 6px !important;
  }
  .vcircle {
    position: absolute;
    top: 45%;
    left: 0;
    width: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  width: 100%;
  height: 100%;
  .userinfo-card {
    .card-box {
      text-align: center;
      position: relative;
      width: 50%;
      height: 25vh;
      display: flex;
      z-index: 0;
    }
  }
  .wrap {
    padding: 0px;
    padding-top: 0vw;
    width: 100%;
    height: 60vw;
    background-color: #24254c;
    background-size: 100%;
    background-position: center center;
    border-radius: 0vw 0vw 0vw 0vw;
  }

  .avatar {
    width: 7vw;
    height: 7vw;
    border-radius: 50%;
    position: absolute;
    top: 0vw;
    right: 0;
    left: 14vw;
  }

  .wrapc {
    padding: 4vw;
  }

  .wrapcc {
    padding: 0vw 0;
    text-align: center;
    justify-content: space-around;
    border-radius: 4vw 4vw 0vw 0vw;
    background-color: #2e2f5a;
  }

  .u-row {
    margin: 0px 0;
  }

  .demo-layout {
    height: 80rpx;
    border-radius: 8rpx;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bgtxt {
    position: relative;
    border: 0;
    display: inline-flex;
    overflow: visible;
    line-height: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    /*justify-content: center;*/
    cursor: pointer;

    z-index: 1;
    box-sizing: border-box;
    transition: all 0.15s;
    font-size: 14;
    height: 8vw;

    line-height: 8vw;
    font-weight: 6 00;
    font-size: 14px;
  }

  .bgtxtp {
    font-weight: 700;
    font-size: 14px;
  }

  .kgb {
    width: 92%;
    margin: -2vw 4vw;
    margin-top: 0vw;
  }

  .tool-card {
    background-color: #ffffff;
    /* padding: 10px 0px; */
    margin-top: 10px;
    border-radius: 1vw;
    width: 96%;
    margin: 0vw 2vw;
    border: 0.5px solid #7079ab24;
  }

  .bgtxtoP {
    text-align: right;
  }
  .u-btn--primary {
    color: #ffffff;
    border-color: #424490;
    background-color: #424490;
  }

  .u-mode-center-box {
    border-radius: 8px !important;
  }

  .bgtxtrt {
    width: 110%;
    margin: 2vw;
  }
  .amount {
    line-height: 1.8;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10upx 0;

    .p {
      font-size: 12px;
      /*color: #0952C3;*/

      padding-bottom: 0px;
      /* color: #FF5722; */
      font-weight: 700;
    }
  }
  .input {
    // line-height: 1.8;
    display: flex;
    flex-direction: row;
    // justify-content: space-between;
    padding: 4px 4px;
    margin: 10px 8px 0px 8px;
    border: 0.5px solid #b2b9deab;
    border-radius: 3px;

    input {
      color: #0952c3;
      font-size: 25upx;
    }

    .cny {
      // line-height: 1.8;
      margin-right: 12upx;
      color: #0952c3;
    }

    .all {
      // line-height: 1.8;
      margin-left: 12upx;
      color: #0952c3;
    }
  }
  .popopview {
    height: 130vw;
    width: 90vw;

    uni-view {
      box-sizing: border-box;
      line-height: 1.8;
    }
    .input .cny {
      margin-right: 25vw;
      color: #0952c3;
    }
  }
  .uni-input {
    height: 30px;
    padding: 1px 12px;
    line-height: 30px;
    font-size: 14px;
    background: #fff;
    flex: 1;
  }
}
.centerview {
  justify-content: center;
}
.vbox {
  margin-right: 40upx;
}
.vbox view {
  margin-top: 10upx;
}
.i-right {
  float: right;
}
</style>
